<template>
  <div class="home">
    <!-- 省 -->
    <template>
      <el-select v-model="value" @change="app1" placeholder="请选择">
        <el-option
          v-for="item in list"
          :key="item.code"
          :label="item.label"
          :value="item.name"
        >
        </el-option>
      </el-select>
    </template>
    <!-- 市 -->
    <template>
      <el-select v-model="value2" @change="app2" placeholder="请选择">
        <el-option
          v-for="item in list1"
          :key="item.code"
          :label="item.label"
          :value="item.name"
        >
        </el-option>
      </el-select>
    </template>
     <!-- 区 -->
     <template>
      <el-select v-model="value3" placeholder="请选择">
        <el-option
          v-for="item in list2"
          :key="item.code"
          :label="item.label"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <button @click="chuan">传值</button>
    </template>
    <hell/>
  </div>
</template>

<script>
// @ is an alias to /src
import hell from "@/components/HelloWorld.vue";
import store from "@/store";
export default {
  components: {
    hell,
  },
  data() {
    return {
      list: [],
      list1: [],
      list2: [],
      value: "",
      value2: "",
      value3:'',
      name:'成绩单',
      shu:[
        {text:'张三',age:'18'}
      ]
    };
  },
  mounted() {
    this.list = store.state.list
    console.log(this.list);
  },
  methods:{
    chuan(){
      this.$router.push({
          path:'/list',
          query:{list:[this.shu],name:this.name}
        })
    },
    app1(val){
      // console.log(val);
      for (let i = 0; i < this.list.length; i++) {
        if(val==this.list[i].name){
          // console.log(this.list[i].children);
          this.list1 = this.list[i].children
        }
      }
      this.value2 =""
      this.value3 =""
    },
    app2(val){
      console.log(val);
      for (let i = 0; i < this.list1.length; i++) {
        if (val = this.list1[i].name) {
          this.list2 = this.list1[0].children
        }
      }
      this.value3 =""
    },
  }
};
</script>

